import React from 'react';
import ReactDOM from 'react-dom/client';

/* 
  表单处理：
    受控组件：表单的 value 受 state 控制 (相当于 Vue 的 v-model)
      属性：value
      事件：onChange
*/

class App extends React.Component {
  state = {
    msg: '',
  };

  // 事件处理函数
  handlerChange = (e) => {
    this.setState({
      msg: e.target.value,
    });
  };

  render() {
    return (
      <>
        <input
          type='text'
          // value 绑定 state
          value={this.state.msg}
          // onChange 修改 state
          onChange={this.handlerChange}
        />
      </>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
